<template lang='pug'>
  div.wireFrame-form-wrap(
    :class="isOpenFrame === 1 ? 'toggleFrame' : isOpenFrame > 1 ? 'toggleItem' : ''")
      .form-wrap.form-wrap-left
        .slide-bar(@click="toggleFrame(1)")
</template>

<script>
/** */
export default {
  name: 'SliderWrapper',
  data () {
    return {}
  }
}
</script>

<style lang='sass' scoped>
@mixin translate-x ($len)
  transform: translateX($len + px)
.wireFrame-form-wrap
  box-shadow: -3px 0px 10px #ccc
  position: fixed
  right: 0
  top: 0
  height: 100%
  width: 760px
  display: flex
  background: #fff
  transition: all 0.8s
  @include translate-x(750)
  .form-wrap
    display: flex
    &>.slide-bar
      height: 100%
      width: 15px
      background: #f6f6f6
      z-index: 1
      box-shadow: 1px 0px 0px #ccc
      &:hover
        background: rgba(152,150,150,.4)
  .form-wrap-left
    flex: 1
    border-right: 1px solid #ddd
  .form-wrap-right
    flex: 1
    .frame-form
      padding: 20px 10px
</style>
